<script>
import gsap from "gsap"

export default {
  name: "NavMenu",
  data() {
    return {
      isOpen: false,
    }
  },
  watch: {
    isOpen: {
      handler(val) {
        if (val) {
          gsap.to(this.$refs.nav, {
            height: '370px',
            duration: 0.75,
            ease: 'power4.inOut',
            immediateRender: false
          })

          gsap.to(this.$refs.navTop, {
            opacity: 1,
            scale: 1,
            duration: 0.3,
            onStart: () => {
              gsap.set(this.$refs.navTop, {display: 'block'})
            },
            delay: 0.5,
            immediateRender: false
          })

          gsap.to(this.$refs.navItems, {
            opacity: 0,
            duration: 0.1,
            onComplete: () => {
              gsap.set(this.$refs.navItems, {display: 'none'})
            },
            immediateRender: false
          })

          gsap.to(this.$refs.navHome, {
            flexGrow: 1,
            duration: 0.2,
            ease: 'power4.inOut',
            delay: 0,
            onComplete: () => {
              this.$refs.icon.className = 'el-icon-close'
            },
            immediateRender: false
          })
        } else {
          gsap.to(this.$refs.nav, {
            height: '60px',
            duration: 0.75,
            ease: 'power4.inOut',
            delay: 0.2,
            immediateRender: false
          })

          gsap.to(this.$refs.navTop, {
            opacity: 0,
            scale: 0.9,
            duration: 0.2,
            onComplete: () => {
              gsap.set(this.$refs.navTop, {display: 'none'})
            },
            immediateRender: false
          })

          gsap.to(this.$refs.navHome, {
            flexGrow: 0,
            duration: 0.2,
            ease: 'power4.inOut',
            onComplete: () => {
              this.$refs.icon.className = 'el-icon-setting'
            },
            immediateRender: false
          })

          gsap.to(this.$refs.navItems, {
            opacity: 1,
            duration: 0.2,
            delay: 0.5,
            onStart: () => {
              gsap.set(this.$refs.navItems, {display: 'flex'})
            },
            immediateRender: false
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    handleClick() {
      this.isOpen = !this.isOpen
    }
  },
  mounted() {
    gsap.set(this.$refs.nav, {height: '60px'})
    gsap.set(this.$refs.navTop, {
      opacity: 0,
      scale: 0.9,
      display: 'none'
    })
    gsap.set(this.$refs.navItems, {
      opacity: 1,
      display: 'flex',
    })
    gsap.set(this.$refs.navHome, {flexGrow: 0})
  }
}
</script>

<template>
  <div class="container">
    <div class="nav" ref="nav">
      <div class="nav-top" ref="navTop">
        <div class="more-links">
          <div class="col" v-for="n in 4" :key="n">
            <div class="col-title">
              <p>Awards</p>
            </div>
            <div class="link">
              <a href="#">link</a>
            </div>
            <div class="link">
              <a href="#">link</a>
            </div>
            <div class="link">
              <a href="#">link</a>
            </div>
          </div>
        </div>
      </div>
      <div class="nav-bottom">
        <div class="nav-home" ref="navHome" @click="handleClick">
          <div class="nav-item" id="toggle">
            <div class="hamburger">
              <i class="el-icon-setting" ref="icon"></i>
            </div>
            <p>More</p>
          </div>
        </div>
        <div class="nav-items" ref="navItems">
          <div class="nav-item" v-for="n in 4" :key="n">
            <a href="#">Home</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
p, a {
  font-size: 14px;
  text-decoration: none;
  color: #a2a2a2;
  transition: 0.5s all;
  line-height: 100%;
}

i {
  position: relative;
  color: #fff;
  top: 1.5px;
}

.container {
  width: 100%;
  min-height: 100vh;

  .nav {
    position: fixed;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 40%;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 75%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.25);

    .nav-top {
      position: absolute;
      width: 100%;
      height: 300px;
      border-radius: 10px;
      display: none;
      opacity: 0;
      transform: scale(0.9);
      padding: 0 10px !important;

      .more-links {
        padding: 20px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        display: flex;

        .col {
          position: relative;
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;

          .col-title {
            position: relative;
            margin-bottom: -25px;

            p {
              position: relative;
              opacity: 0.75;
            }

            p:before {
              position: absolute;
              content: "";
              top: 6px;
              left: -16px;
              width: 4px;
              height: 4px;
              border-radius: 100%;
              background: #ffffff;
              display: flex;
            }
          }

          div {
            flex: 1;
            padding: 10px 15px;
          }

          .link {
            a {
              color: #fff;
            }
          }
        }

        .col:before {
          position: absolute;
          content: "";
          top: 30px;
          left: 0;
          width: 1px;
          height: 85%;
          display: block;
          border-left: 1px solid rgba(255, 255, 255, 0.25);
          border-style: dashed;
        }
      }
    }

    .nav-bottom {
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 60px;
      display: flex;
      gap: 5px;
      padding: 12px 10px 10px 10px;

      .nav-home {
        flex: 1;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: 0.5s all;
        padding: 0 20px !important;

        .nav-item {
          gap: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .nav-home:hover {
        background: rgba(0, 0, 0, 0.75);
      }

      .nav-items {
        flex: 4;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;

        div {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 10px;
          transition: 0.5s all;
        }

        .nav-item:hover {
          color: #fff;
          border: 1px solid rgba(255, 255, 255, 0.5);

          a {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>